
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>蔡某的个人网站</title>

	</head>
	<style>
		
body{
	background-color: #f2f2f2;
}

.box{
	width: 1200px;
	margin: 0 auto;
}

.header{
	width: 100%;
	height: 40px;
	line-height: 40px;
	margin-top: 20px;
	margin-bottom: 10px;
	display: flex;
	justify-content: space-between;
	background-color: #ffff7f;
}

.header ul{
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding: 0 40px;
	font-size: 16px;
}

.header .title{
	font-size: 22px;
}

.content .items{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 10px;
}

.content .item{
    text-align:center ; 
	width: 24.5%;
	margin-bottom: 20px;
	transition: all 0.6s;
}

.content .item img{
	
	margin-bottom: 10px;
}
.content .item:hover,.content .item:active{
			transform: scale(1.2);
		}

		
.footer{
	margin-top: 10px;
	box-sizing: border-box;
	width: 100%;
	padding: 20px;
	background-color: #96BCE0;
	text-align: center;
}



	</style>
	<body>
		<div class="box">
			<div class="header">
				<ul>
					<li class="title">蔡某的个人网站</li>
>
				</ul>
			</div>

			<div class="content">
				<div class="items">
					<div class="item">
						<div class="item-img">
							<img src="img/1.jpg" width=216px height=384px>
							
						</div>
						<div class="item-text">
							<a href="zy1/zy1.html">打印图案1（点击文字查看）
						</div>
					</div>
					<div class="item">
						<div class="item-img">
							<img src="img/2.jpg" width=216px height=384px>
						</div>
						<div class="item-text">
							<a href="zy2/zy2.html">打印图案2（点击文字查看）
						</div>
					</div>
					<div class="item">
						<div class="item-img">
							<img src="img/3.jpg" width=216px height=384px>
						</div>
						<div class="item-text">
							<a href="zy3/zy3.html">DOM操控图片（点击文字查看）
						</div>
					</div>
					<div class="item">
						<div class="item-img">
							<img src="img/4.jpg" width=216px height=384px>
						</div>
						<div class="item-text">
						<a href="zy4/zy4.html">DOM练习（点击文字查看）<br /><br /><br />
						</div>
					</div>
					<div class="item">
						<div class="item-img">
							<img src="img/5.jpg" width=216px height=384px>
						</div>
						<div class="item-text">
							<a href="zy5/zy5.html">web广告（点击文字查看）
						</div>
					</div>
					<div class="item">
						<div class="item-img">
							<img src="img/6.png" width=216px height=384px>
						</div>
						<div class="item-text">
						<a href="zy6/zy6.html">jQuery插件（点击文字查看）
						</div>
					</div>
					<div class="item">
						<div class="item-img">
							<img src="img/7.jpg" width=216px height=384px>
						</div>
						<div class="item-text">
						<a href="zy7/zy7.html">坦克移动（点击文字查看）
						</div>
					</div>
                    	<div class="item">
						<div class="item-img">
							<img src="img/8.jpg" width=216px height=384px>
						</div>
						<div class="item-text">
							<a href="zy8/zy8.html">游戏角色（点击文字查看）<br /><br /><br />
						</div>
					</div>
                    <div class="item">
						<div class="item-img">
							<img src="img/9.jpg" width=216px height=384px>
						</div>
						<div class="item-text">
							<a href="zy9/zy9.html">判断用户是否存在（点击文字查看）
						</div>
					</div>
					<div class="item">
						<div class="item-img">
							<img src="img/10.png" width=216px height=384px>
						</div>
						<div class="item-text">
						<a href="zy10/zy10.html">用户注册验证（点击文字查看）<br /><br /><br />
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<p>点击在蔡某的网站注册账号</p>
			</div>
		</div>
	</body>
</html>



